<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://www.springframework.org/tags" prefix="s"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<link rel="stylesheet" href="<s:url value="/resource/css/template.css"/>" />
<style>
.txtLabel{
	text-align:right;
	border: 0px;
	background-color: #EEEEEE;
}
</style>
<script>
$(function() {
	$("#fechaInicio").datepicker({
		dateFormat : 'dd-mm-yy',
		changeMonth : true,
		changeYear : true
	});
});
function f_cargaDatosTipo(id, indice){
	var tipo=$("#cboTipo"+indice).val();
    $.ajax({
		url :'<s:url value="/ObtenerDatosDiaCampo"/>',
		dataType: "html",
		type: "POST",
		data : "id="+id+"&codigoTipo="+tipo+"&indice="+indice,
		error: function(xhr, ajaxOptions, thrownError){
			$("#msjPrincipal").html(xhr.responseText);
		},
		success: function(datos){
			$("#lblPrecioUnitario"+indice).html(datos);
			f_calculoUnitario(indice);
		}
	});

}
function f_calculoUnitario(indice){
	var valorPrecioUnitario=$("#txtPrecioUnitario"+indice).val();
	var cantidad=$("#txtCantidad"+indice).val();
	var total=parseFloat(valorPrecioUnitario*cantidad);
	$("#txtPrecioTotal"+indice).val(total);
	f_calculoTotal();
}
function f_calculoTotal(){
	var cantidad=$("#txtTotal").val();
	var i=1;
	var suma=0;
	var valor;
	while(i<=cantidad){
		try {
			valor=$("#txtPrecioTotal"+i).val();
			valor=parseFloat(valor);
			suma=suma+valor;
		} catch (e) {
			
		}
		i++;
	}
	
	$("#precioTotal").val(suma);
}
function f_cargaTipo(id, indice){
	$.ajax({
		url :'<s:url value="/CargarDatosServicioJuego"/>',
		dataType: "html",
		type: "POST",
		data : "codigoTipo="+id+"&indice="+indice,
		error: function(xhr, ajaxOptions, thrownError){
			$("#msjPrincipal").html(xhr.responseText);
		},
		success: function(datos){
			$("#lblJuegoServicio"+indice).html(datos);
		}
	});
}
function f_aumentaFila(){
    var total=document.getElementById('txtTotal').value;
    document.getElementById('txtTotal').value=parseInt(total)+1;
}

function f_agregaFila(id){
    var cantidad=document.getElementById('txtTotal').value;
	indice=parseInt(cantidad)+1;
	var v=indice;
	var tbody = document.getElementById(id).getElementsByTagName("TBODY")[0];
	var objtr = document.createElement("tr");
		objtr.id = 'tr'+indice;
	var objtd1 = document.createElement("td");
	var txtCodigo = document.createElement('INPUT');
		txtCodigo.name = 'txtCodigo'+indice;
		txtCodigo.id = 'txtCodigo'+indice;
		txtCodigo.size='10';
		txtCodigo.type='hidden';
		txtCodigo.value='';
	var txtCantidad = document.createElement('INPUT');
		txtCantidad.name = 'txtCantidad'+indice;
		txtCantidad.id = 'txtCantidad'+indice;
		txtCantidad.size='5';
		txtCantidad.type='text';
		txtCantidad.value='';
		txtCantidad.onkeyup=function(){f_calculoUnitario(v);};
	var objtd2 = document.createElement("td");
	var txtDescripcion = document.createElement('TEXTAREA');
		txtDescripcion.name = 'txtDescripcion'+indice;
		txtDescripcion.id = 'txtDescripcion'+indice;
		txtDescripcion.value ='';
		txtDescripcion.rows='2';
		txtDescripcion.cols='16';	
	var objtd3 = document.createElement("td");
	var cboTipo = document.createElement('SELECT');
		cboTipo.name = 'cboTipo'+indice;
		cboTipo.id = 'cboTipo'+indice;
		cboTipo.onchange = function(){ f_cargaTipo(this.value,v); };
			opt1 = document.createElement('OPTION');
			opt1.value = '0';
			opt1.innerHTML = '-Seleccione-';
		cboTipo.appendChild(opt1);
			opt2 = document.createElement('OPTION');
			opt2.value = 'S';
			opt2.innerHTML = 'Servicio';
		cboTipo.appendChild(opt2);
			opt3 = document.createElement('OPTION');
			opt3.value = 'J';
			opt3.innerHTML = 'Juego';
		cboTipo.appendChild(opt3);
	var objtd4 = document.createElement("td");
	var lblJuegoServicio = document.createElement('LABEL');
		lblJuegoServicio.id = 'lblJuegoServicio'+indice;
	var cboJuegoServicio = document.createElement('SELECT');
		cboJuegoServicio.name = 'cboJuegoServicio'+indice;
		cboJuegoServicio.id = 'cboJuegoServicio'+indice;
		cboJuegoServicio.onchange = function(){ f_cargaDatosTipo(this.value,v); };
			opt2 = document.createElement('OPTION');
			opt2.value = '0';
			opt2.innerHTML = '-Seleccione-';
		cboJuegoServicio.appendChild(opt2);
	var objtd6 = document.createElement("td");
		objtd6.align="right";
	var lblPrecioUnitario = document.createElement('LABEL');
		lblPrecioUnitario.id = 'lblPrecioUnitario'+indice;
	var txtPrecioUnitario = document.createElement('INPUT');
		txtPrecioUnitario.name = 'txtPrecioUnitario'+indice;
		txtPrecioUnitario.id = 'txtPrecioUnitario'+indice;
		txtPrecioUnitario.size='8';
		txtPrecioUnitario.type='text';
		txtPrecioUnitario.value='';
		txtPrecioUnitario.style.border = "0";
		txtPrecioUnitario.readOnly='yes';
		txtPrecioUnitario.className="txtLabel";
	var objtd7 = document.createElement("td");
		objtd7.align="right";
	var txtPrecioTotal = document.createElement('INPUT');
		txtPrecioTotal.name = 'txtPrecioTotal'+indice;
		txtPrecioTotal.id = 'txtPrecioTotal'+indice;
		txtPrecioTotal.size='8';
		txtPrecioTotal.type='text';
		txtPrecioTotal.value='0';
		txtPrecioTotal.readOnly='yes';
		txtPrecioTotal.style.border = "0";
		txtPrecioTotal.className="txtLabel";
	var objtd8 = document.createElement("td");
		objtd8.align="center";
	var imgEliminar = document.createElement("img");
		imgEliminar.src = "<s:url value='/resource/images/trash.png'/>";
		imgEliminar.id = "botonEliminar"+indice;
		imgEliminar.style.cursor = "pointer";
		imgEliminar.onclick = function(){ f_removerFila(v); };
	tbody.appendChild(objtr);
	objtr.appendChild(objtd1);
	objtd1.appendChild(txtCodigo);
	objtd1.appendChild(txtCantidad);
	objtr.appendChild(objtd2);
	objtd2.appendChild(txtDescripcion);
	objtr.appendChild(objtd3);
	objtd3.appendChild(cboTipo);
	objtr.appendChild(objtd4);
	objtd4.appendChild(lblJuegoServicio);
	lblJuegoServicio.appendChild(cboJuegoServicio);
	objtr.appendChild(objtd6);
	objtd6.appendChild(lblPrecioUnitario);
	lblPrecioUnitario.appendChild(txtPrecioUnitario);
	objtr.appendChild(objtd7);
	objtd7.appendChild(txtPrecioTotal);
	objtr.appendChild(objtd8);
	objtd8.appendChild(imgEliminar);
	f_aumentaFila();
}
function f_removerFila(x) {
    indiceFila=document.getElementById('tr'+x);
    var padre = indiceFila.parentNode;
    padre.removeChild(indiceFila);
    f_calculoTotal();
}
</script>
<input type="hidden" value="${resultado.diaCampo.codigo}" id="codigoDiaCampo" name="codigoDiaCampo"/>
<table width="95%" border="0" align="center">
	<tr>
		<td>
			<div>
				<label>Numero de Personas</label> 
				<input type="text" name="numPersonas" id="numPersonas" class="field" value="${resultado.diaCampo.cantidadPersonas}" />
			</div>
		</td>
		<td>
			<div>
				<label>Club</label> 
				<select name="cboClub" size="1" id="cboClub">
					<option value="0">-Seleccione Club-</option>
					<c:forEach items="${resultado.listaClub}" var="listaClub">
						<option value="${listaClub.codigo}" ${listaClub.codigo == resultado.diaCampo.club.codigo ? 'selected' : ''}>${listaClub.nombre}</option>
					</c:forEach>
				</select>
			</div>
		</td>
		<td>
			<div>
				<label>Fecha</label>
				<input type="text" id="fechaInicio" name="fechaInicio" readonly="readonly" class="field" value="<fmt:formatDate value="${resultado.diaCampo.fecha}" pattern="dd-MM-yyyy"/>"/>
			</div>
		</td>
	</tr>
	<tr>
		<td colspan="3">
			<div id="buttonLibre" align="right">
				<button onclick="f_agregaFila('tDetalle');">Agregar Detalle</button>
			</div>
		</td>
	</tr>
	<tr>
		<td colspan="3">
			<input name="txtTotal" type="hidden" id="txtTotal" value="${resultado.diaCampo.listDiaCampoDetalles.size()}" />
			<table width="100%" border="1"id="tDetalle" bordercolor="#0092C8">
				<tbody>
				<tr style="font-weight:bold;color:#FFF" align="center">
					<td bgcolor="#0092C8">N Pers.</td>
					<td bgcolor="#0092C8">Descripcion</td>
					<td bgcolor="#0092C8">Servicio/Juego</td>
					<td bgcolor="#0092C8">Datos Servicio/Juego</td>
					<td bgcolor="#0092C8">Precio unidad</td>
					<td bgcolor="#0092C8">Precio total</td>
					<td bgcolor="#0092C8">Eliminar</td>
				</tr>
				<c:set var="contador" value="1"/>
				<c:forEach items="${resultado.diaCampo.listDiaCampoDetalles}" var="listaDetalle">
					<tr id="tr<c:out value="${contador}" />">
						<td>
							<input id="txtCodigo<c:out value="${contador}" />" type="hidden" name="txtCodigo<c:out value="${contador}" />" size="5" value="${listaDetalle.codigo}"> 
							<input id="txtCantidad<c:out value="${contador}" />" type="text" name="txtCantidad<c:out value="${contador}" />" size="5" value="${listaDetalle.cantidadParticipantes}" onkeyup="f_calculoUnitario(<c:out value="${contador}" />);">
						</td>
						<td>
							<textarea id="txtDescripcion<c:out value="${contador}" />" name="txtDescripcion<c:out value="${contador}" />" rows="2" cols="16">${listaDetalle.descripcion}</textarea>
						</td>
						<td>
							<select id="cboTipo<c:out value="${contador}" />" name="cboTipo<c:out value="${contador}" />" onchange="f_cargaTipo(this.value,<c:out value="${contador}" />)">
								<option value="0">-Seleccione-</option>
								<option value="S" ${listaDetalle.servicio.codigo != 0 ? 'selected':'' }>Servicio</option>
								<option value="J" ${listaDetalle.juego.codigo != 0 ? 'selected':''}>Juego</option>
							</select>
						</td>
						<td>
							<label id="lblJuegoServicio<c:out value="${contador}" />">
								<select id="cboJuegoServicio<c:out value="${contador}" />" name="cboJuegoServicio<c:out value="${contador}" />"  onchange="f_cargaDatosTipo(this.value,<c:out value="${contador}" />)">>
									<option value="0">-Seleccione-</option>									
									<c:choose>
										<c:when test="${listaDetalle.servicio.codigo != 0}">
											<c:forEach items="${resultado.listaDatosServicio}" var="listaServicio">
												<option value="${listaServicio.codigo}" ${listaServicio.codigo==listaDetalle.servicio.codigo ? 'selected':''}>${listaServicio.nombre}</option>
											</c:forEach>
										</c:when>
										<c:when test="${listaDetalle.juego.codigo != 0}">
											<c:forEach items="${resultado.listaDatosJuego}" var="listaJuego">
												<option value="${listaJuego.codigo}" ${listaJuego.codigo==listaDetalle.juego.codigo ? 'selected':''}>${listaJuego.nombre}</option>
											</c:forEach>
										</c:when>
									</c:choose>
								</select>
							</label>
						</td>
						<td align="right">
							<label id="lblPrecioUnitario<c:out value="${contador}" />">
								<input id="txtPrecioUnitario<c:out value="${contador}" />" type="text" name="txtPrecioUnitario<c:out value="${contador}" />" size="8" style="border: 0px none;background-color: #EEEEEE;" class="txtLabel" readonly="" value="${listaDetalle.servicio.codigo != 0 ? listaDetalle.servicio.precioPersona : listaDetalle.juego.precioPersona}">
							</label>
						</td>
						<td align="right">
							<input id="txtPrecioTotal<c:out value="${contador}" />" class="txtLabel" type="text" name="txtPrecioTotal<c:out value="${contador}" />" class="txtLabel"value="${listaDetalle.precio}" size="8" readonly="" style="border: 0px none;background-color: #EEEEEE;">
						</td>
						<td align="center">
							<img id="botonEliminar<c:out value="${contador}" />" src="/ProjectPilot/resource/images/trash.png" onclick="f_removerFila(<c:out value="${contador}" />);" style="cursor: pointer;">
						</td>
					</tr>
					<c:set var="contador" value="${contador+1}"/> 
				</c:forEach>
				
				</tbody>
				<tr style="font-weight:bold;" align="center">
					<td colspan="4">&nbsp;</td>
					<td>Precio total</td>
					<td align="right">
						<input type="text" id="precioTotal" size="7" name="precioTotal" value="${resultado.diaCampo.precioTotal}" style="background-color: #EEEEEE;" class="txtLabel" />
					</td>
					<td>&nbsp;</td>
				</tr>
			</table>
		</td>
	</tr>
	<tr>
		<td colspan="3"></td>
	</tr>
</table>
